<script>
import API_REQUEST from '@/api/api'
export default {
  name: "notice",
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      noticeList: []
    }
  },
  mounted() {
    this.isDischarge = false
    API_REQUEST.getNoticeList().then(res => {
      this.noticeList = [
        ...res.data,
        ...res.data,
        ...res.data
      ]
    })
  },
}
</script>

<template>
  <!-- 资讯 -->
  <router-link
      class=""
      :to="{ path: '/pages/news_list/news_list' }"
  >
    <view class="notice-box">
      <u-image width="14px" height="14px" style="margin: 0 10px 4px 0" class="" src="/static/home/notice.png"></u-image>
      <span class="f-r a-c" style="flex-grow: 1;font-size: 12px">
                    <span style="flex-shrink: 0;padding-right: 20rpx" v-if="title">{{ title }}</span>
                    <div style="flex-grow: 1;padding-right: 20rpx">
                      <swiper
                          vertical
                          circular
                          :interval="2000"
                          style="width: 100%;height: 28px"
                          autoplay
                          display-multiple-items="1"
                      >
                      <swiper-item v-for="(item, index) in noticeList" :key="index">
                        <view class="ellipsis" :data-item="item" style="height: 28px;line-height: 30px">
                          {{ item.title }}
                        </view>
                      </swiper-item>
                    </swiper>
                    </div>
                  </span>
      <u-image width="14px" height="14px" style="margin: 0 5px 4px 0"src="/static/home/notice-all.png"></u-image>
    </view>
  </router-link>
</template>

<style lang="scss">
.notice-box {
  background-color: #f0f0f0;
  color: #333;
  height: 28px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  border-radius: 11px;
  margin: 11px;
  box-sizing: border-box;
}

</style>
